<template>
  <el-date-picker
    v-model="currentValue"
    :readonly="readonly"
    :disabled="disabled"
    :editable="editable"
    :clearable="clearable"
    :size="size"
    :placeholder="placeholder"
    :start-placeholder="startPlaceholder"
    :end-placeholder="endPlaceholder"
    :format="format"
    :align="align"
    :popper-class="popperClass"
    :picker-options="pickerOptions"
    :range-separator="rangeSeparator"
    :default-value="defaultValue"
    :default-time="defaultTime"
    :value-format="valueFormat"
    :name="name"
    :unlink-panels="unlinkPanels"
    :prefix-icon="prefixIcon"
    :clear-icon="clearIcon"
    :validate-event="validateEvent"
    :type="type"
    @update:modelValue="handleInputEvent"
    @pick="handlePick"
  />
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch } from "vue";
import { ElDatePicker } from "element-plus";

type DatePickerType =
  | "year"
  | "month"
  | "date"
  | "datetime"
  | "week"
  | "datetimerange"
  | "daterange"
  | "dates";

type SingleDateValue = Date;
type RangeDateValue = [Date, Date];
type DateValue = SingleDateValue | RangeDateValue;

export default defineComponent({
  name: "DatePicker",
  components: {
    ElDatePicker,
  },
  props: {
    modelValue: {
      type: [Date, Array] as PropType<DateValue>,
      default: null,
    },
    onPick: {
      type: Function as PropType<(_date: DateValue) => void>,
      default: () => {},
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    editable: {
      type: Boolean,
      default: true,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    size: {
      type: String as PropType<"large" | "default" | "small">,
      default: "default",
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    startPlaceholder: String,
    endPlaceholder: String,
    format: {
      type: String,
      default: "yyyy-MM-dd",
    },
    align: {
      type: String,
      default: "left",
    },
    popperClass: String,
    pickerOptions: Object,
    rangeSeparator: String,
    defaultValue: {
      type: [Date, Array] as PropType<DateValue>,
      default: null,
    },
    defaultTime: {
      type: [Date, Array] as PropType<DateValue>,
      default: null,
    },
    valueFormat: String,
    name: String,
    unlinkPanels: Boolean,
    prefixIcon: String,
    clearIcon: String,
    validateEvent: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String as PropType<DatePickerType>,
      default: "date",
    },
  },
  emits: {
    "update:modelValue": (_value: DateValue) => true,
    pick: (_date: DateValue) => true,
  },
  setup(props, { emit }) {
    const currentValue = ref<DateValue>(props.modelValue);

    watch(
      () => props.modelValue,
      (val) => {
        currentValue.value = val;
      }
    );

    const handleInputEvent = (value: DateValue) => {
      emit("update:modelValue", value);
    };

    const handlePick = (date: DateValue) => {
      if (typeof props.onPick === "function") {
        props.onPick(date);
      }
      emit("pick", date);
    };

    return {
      currentValue,
      handleInputEvent,
      handlePick,
    };
  },
});
</script>

<style lang="scss" scoped>
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>
